<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<view class="header-content">
				<text class="title">健康报告</text>
				<text class="subtitle">父母健康数据汇总</text>
			</view>
		</view>

		<!-- 父母选择标签 -->
		<view class="parent-tabs">
			<view 
				class="tab-item" 
				:class="{ active: selectedParent === 'father' }"
				@tap="selectParent('father')"
			>
				<text class="tab-text">父亲</text>
			</view>
			<view 
				class="tab-item" 
				:class="{ active: selectedParent === 'mother' }"
				@tap="selectParent('mother')"
			>
				<text class="tab-text">母亲</text>
			</view>
		</view>

		<!-- 健康概览 -->
		<view class="health-overview">
			<text class="section-title">健康概览</text>
			<view class="overview-cards">
				<view class="overview-card">
					<text class="card-value">正常</text>
					<text class="card-label">血压状态</text>
					<text class="card-desc">120/80 mmHg</text>
				</view>
				<view class="overview-card">
					<text class="card-value">良好</text>
					<text class="card-label">睡眠质量</text>
					<text class="card-desc">7.5小时</text>
				</view>
				<view class="overview-card">
					<text class="card-value">稳定</text>
					<text class="card-label">血糖水平</text>
					<text class="card-desc">5.8 mmol/L</text>
				</view>
			</view>
		</view>

		<!-- 健康趋势图 -->
		<view class="health-trend">
			<text class="section-title">健康趋势</text>
			<view class="trend-chart">
				<view class="chart-header">
					<text class="chart-title">血压变化趋势</text>
					<view class="chart-legend">
						<view class="legend-item">
							<view class="legend-color systolic"></view>
							<text class="legend-text">收缩压</text>
						</view>
						<view class="legend-item">
							<view class="legend-color diastolic"></view>
							<text class="legend-text">舒张压</text>
						</view>
					</view>
				</view>
				<view class="chart-content">
					<view class="chart-item" v-for="(item, index) in healthTrend" :key="index">
						<view class="chart-bars">
							<view class="chart-bar systolic" :style="{ height: item.systolic + 'rpx' }"></view>
							<view class="chart-bar diastolic" :style="{ height: item.diastolic + 'rpx' }"></view>
						</view>
						<text class="chart-label">{{item.day}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 健康提醒 -->
		<view class="health-reminders">
			<text class="section-title">健康提醒</text>
			<view class="reminder-list">
				<view class="reminder-item">
					<view class="reminder-icon">💊</view>
					<view class="reminder-content">
						<text class="reminder-title">定期体检</text>
						<text class="reminder-desc">建议每3个月进行一次全面体检</text>
						<text class="reminder-time">下次体检：2024年3月15日</text>
					</view>
					<view class="reminder-status urgent">紧急</view>
				</view>
				<view class="reminder-item">
					<view class="reminder-icon">🏃</view>
					<view class="reminder-content">
						<text class="reminder-title">运动建议</text>
						<text class="reminder-desc">建议每天进行30分钟轻度运动</text>
						<text class="reminder-time">今日运动：未完成</text>
					</view>
					<view class="reminder-status normal">正常</view>
				</view>
			</view>
		</view>

		<!-- 健康数据详情 -->
		<view class="health-details">
			<text class="section-title">详细数据</text>
			<view class="detail-list">
				<view class="detail-item">
					<text class="detail-label">心率</text>
					<text class="detail-value">72 bpm</text>
					<text class="detail-status normal">正常</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">体温</text>
					<text class="detail-value">36.5°C</text>
					<text class="detail-status normal">正常</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">体重</text>
					<text class="detail-value">65.2 kg</text>
					<text class="detail-status normal">正常</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">步数</text>
					<text class="detail-value">8,500 步</text>
					<text class="detail-status good">良好</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import apiService from '../../utils/api.js';
	export default {
		data() {
			return {
				selectedParent: 'father',
				healthTrend: [
					{ day: '周一', systolic: 60, diastolic: 40 },
					{ day: '周二', systolic: 65, diastolic: 45 },
					{ day: '周三', systolic: 70, diastolic: 50 },
					{ day: '周四', systolic: 68, diastolic: 48 },
					{ day: '周五', systolic: 72, diastolic: 52 },
					{ day: '周六', systolic: 75, diastolic: 55 },
					{ day: '周日', systolic: 70, diastolic: 50 }
				]
			}
		},
		onLoad() {
			this.loadHealthData();
		},
		methods: {
			selectParent(parent) {
				this.selectedParent = parent;
				this.loadHealthData();
			},
			
			async loadHealthData() {
				// 根据选择的父母加载对应的健康数据
				console.log('加载', this.selectedParent === 'father' ? '父亲' : '母亲', '的健康数据');
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f9f7f7 0%, #eaf4f4 100%);
		animation: pageLoad 0.6s ease-out;
	}

	@keyframes pageLoad {
		0% {
			opacity: 0;
			transform: translateY(20rpx);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.header {
		background: linear-gradient(135deg, #4fc3f7, #29b6f6);
		padding: 60rpx 30rpx 40rpx;
	}

	.header-content {
		text-align: center;
	}

	.title {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	/* 父母选择标签 */
	.parent-tabs {
		display: flex;
		background: #ffffff;
		margin: 20rpx 30rpx;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		opacity: 0;
		animation: fadeIn 0.5s ease-out 0.3s forwards;
	}

	@keyframes fadeIn {
		0% {
			opacity: 0;
			transform: translateY(10rpx);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.tab-item {
		flex: 1;
		padding: 30rpx;
		text-align: center;
		background: #ffffff;
		transition: all 0.3s ease;
	}

	.tab-item.active {
		background: linear-gradient(135deg, #4fc3f7, #29b6f6);
	}

	.tab-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.tab-item.active .tab-text {
		color: #ffffff;
	}

	/* 健康概览 */
	.health-overview {
		margin: 30rpx;
		opacity: 0;
		animation: fadeIn 0.5s ease-out 0.4s forwards;
	}

	.section-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #3d5a80;
		margin-bottom: 20rpx;
		position: relative;
		padding-left: 16rpx;
	}

	.section-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #4fc3f7, #29b6f6);
		border-radius: 4rpx;
	}

	.overview-cards {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 20rpx;
	}

	.overview-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		text-align: center;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	.overview-card:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.card-value {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #4CAF50;
		margin-bottom: 8rpx;
	}

	.card-label {
		display: block;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.card-desc {
		font-size: 20rpx;
		color: #999;
	}

	/* 健康趋势图 */
	.health-trend {
		margin: 30rpx;
		opacity: 0;
		animation: fadeIn 0.5s ease-out 0.5s forwards;
	}

	.trend-chart {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}

	.chart-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.chart-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.chart-legend {
		display: flex;
		gap: 20rpx;
	}

	.legend-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.legend-color {
		width: 16rpx;
		height: 16rpx;
		border-radius: 4rpx;
	}

	.legend-color.systolic {
		background: #ff6b6b;
	}

	.legend-color.diastolic {
		background: #4ecdc4;
	}

	.legend-text {
		font-size: 24rpx;
		color: #666;
	}

	.chart-content {
		display: flex;
		justify-content: space-between;
		align-items: end;
		height: 200rpx;
	}

	.chart-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.chart-bars {
		display: flex;
		align-items: end;
		gap: 4rpx;
		margin-bottom: 10rpx;
	}

	.chart-bar {
		width: 12rpx;
		border-radius: 6rpx 6rpx 0 0;
	}

	.chart-bar.systolic {
		background: #ff6b6b;
	}

	.chart-bar.diastolic {
		background: #4ecdc4;
	}

	.chart-label {
		font-size: 24rpx;
		color: #666;
	}

	/* 健康提醒 */
	.health-reminders {
		margin: 30rpx;
		opacity: 0;
		animation: fadeIn 0.5s ease-out 0.6s forwards;
	}

	.reminder-list {
		background: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.reminder-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		transition: all 0.2s ease;
	}

	.reminder-item:hover {
		background: #f8f9fa;
	}

	.reminder-item:last-child {
		border-bottom: none;
	}

	.reminder-icon {
		font-size: 40rpx;
		margin-right: 20rpx;
	}

	.reminder-content {
		flex: 1;
	}

	.reminder-title {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.reminder-desc {
		display: block;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.reminder-time {
		font-size: 22rpx;
		color: #999;
	}

	.reminder-status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
	}

	.reminder-status.urgent {
		background: #ffebee;
		color: #f44336;
	}

	.reminder-status.normal {
		background: #e8f5e8;
		color: #4CAF50;
	}

	/* 健康数据详情 */
	.health-details {
		margin: 30rpx;
		opacity: 0;
		animation: fadeIn 0.5s ease-out 0.7s forwards;
	}

	.detail-list {
		background: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.detail-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		transition: all 0.2s ease;
	}

	.detail-item:hover {
		background: #f8f9fa;
	}

	.detail-item:last-child {
		border-bottom: none;
	}

	.detail-label {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.detail-value {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-right: 20rpx;
	}

	.detail-status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
	}

	.detail-status.normal {
		background: #e8f5e8;
		color: #4CAF50;
	}

	.detail-status.good {
		background: #e3f2fd;
		color: #2196F3;
	}
</style>
